<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>静态网站</title>
	<style type="text/css">
	html,body,div,ul,img{padding:0;margin:0;}
	header{background: lightgreen;height: 50px;text-align: center;line-height: 50px;font:bold 24px/50px Arial;}
	nav{background: lightblue;height: 30px;line-height: 30px;padding-left: 180px;}
	section{background: lightyellow;min-height: 600px;}
	footer{background: lightgray;height: 50px;text-align: center;line-height: 50px;}
	#container{width:1010px;height:auto;margin:auto;background: #E2F9AA;padding-bottom: 10px;}
	ul li{list-style: none;width: 190px;height: 200px;float: left;background: lightyellow;margin-left: 10px;margin-top: 10px;}
	ul li img{width:190px;height: 170px;display: block;cursor: pointer;}
	ul li div{background: #7DBD50;width: 185px;height: 30px;line-height: 30px;padding-left: 5px;}
	</style>
</head>
<body>
	<header>蔬菜水果网上超市</header>
	<nav>
		<a href="#">水果</a>
		<a href="#">蔬菜</a>
		<a href="#">干果</a>
	</nav>
	<section>
		<div id="container">
			<ul>
				<li><a href="detail/detail-banana.html"><img src="img/banana1.jpg"><div>香蕉</div></a></li>
				<li><a href="detail/detail-apple.html"><img src="img/apple1.jpg"><div>苹果</div></a></li>
				<li><a href="detail/detail-orange.html"><img src="img/orange1.jpg"><div>橘子</div></a></a></a></li>
				<li><a href="detail/detail-pineapple.html"><img src="img/pineapple1.jpg"><div>菠萝</div></a></a></li>
				<li><a href="detail/detail-mango.html"><img src="img/mango1.jpg"><div>芒果</div></a></li>
				<li><img src="img/grape1.jpg"><div>葡萄</div></li>
				<li><img src="img/pomelo1.jpg"><div>柚子</div></li>
				<li><img src="img/pawpaw1.jpg"><div>木瓜</div></li>
				<li><img src="img/kivi1.jpg"><div>猕猴桃</div></li>
				<li><img src="img/persimmon1.jpg"><div>柿子</div></li>
				<li><img src="img/lemon1.jpg"><div>柠檬</div></li>
				<li><img src="img/pomegranate1.jpg"><div>石榴</div></li>
				<li><img src="img/pear1.jpg"><div>梨</div></li>
				<li><img src="img/strawberry1.jpg"><div>草莓</div></li>
				<li><img src="img/blueberry1.jpg"><div>蓝莓</div></li>
				<li><img src="img/waxberry1.jpg"><div>杨莓</div></li>
				<li><img src="img/peach1.jpg"><div>桃</div></li>
				<li><img src="img/coconut1.jpg"><div>椰子</div></li>
				<li><img src="img/apricot1.jpg"><div>杏</div></li>
				<li><img src="img/cherry1.jpg"><div>樱桃</div></li>
			</ul>
			<div style="clear: both;"></div>
		</div>
	</section>
	<footer>版权所有</footer>
</body>
</html>